<template>
	<view>
		<!-- <u-navbar :border-bottom="false" title="一成首付	" title-size="32" title-width="500" class="nav"></u-navbar> -->
		<u-sticky offset-top="0">
			<view style="background-color: #fff;padding:30rpx 0">
				<view class="search">
					<u-search v-model="searchKey" @change="change" placeholder="搜索品牌/车型" :show-action="false" @search="onSearch"></u-search>
				</view>
			</view>

			<!-- 筛选 -->
			<view class="lists">
				<view class="flex flex-wrap-w" style="margin-left: 30rpx;">
					<view class="item-list" v-for="(item,index) in paymentsPrice" :key='item.id' @click="paymentsType(item)">
						<view :class="{'active': type === item.id}">{{item.name}}</view>
					</view>
				</view>

			</view>
			<view class="item" style="background-color: #fff;">
				<u-dropdown ref='paymentSort' active-color='#FBB000' @open='open' @close="close" :class="isOpen ? 'down-open':'down-close'">

					<!-- 智能排序 -->
					<u-dropdown-item :title="sort">
						<view class="dropdown2">
							<view v-for="(item,index) in paymentsSort" :key='item.id' @click="paymentSort(item)" class='sortList'>
								<view :class="{'active': paymentValue === item.id}">{{item.name}}</view>
							</view>
						</view>
					</u-dropdown-item>
					<u-dropdown-item title="品牌">
						<view style="background-color: #FFFFFF;">
							<brand-list @close="closePayment" @change="brandListChange" :height="870+'rpx'"></brand-list>
						</view>
					</u-dropdown-item>

					<!-- 首付 -->
					<u-dropdown-item :title="paymentTitlie">
						<view class="dropdown2">
							<view class="list">
								<view v-for="(item,index) in paymentsPriceType" :key='item.id'  class="flex flex-jc-c"  style="width: 20%;line-height: 70rpx;"  @click="paymentsSrot(item)">
									<view :class="{'active': paymentsPriceValue === item.id}">{{item.name}}</view>
								</view>
							</view>
							<view class="bottom">有<text>{{carNmber}}</text>款车符合条件</view>
						</view>

					</u-dropdown-item>
					<u-dropdown-item :title="mounthlyTitle">
						<view class="dropdown2">
							<view class="list2">
								<view v-for="(item,index) in mounthlyPrice" :key='item.id'  class="flex flex-jc-c"  style="width: 20%;line-height: 70rpx;"  @click="mounthlySort(item)">
									<view :class="{'active': mounthlyPriceValue === item.id}">{{item.name}}</view>
								</view>
							</view>
							<view class="bottom">有<text>{{carNmber}}</text>款车符合条件</view>
						</view>
					</u-dropdown-item>
				</u-dropdown>

				<!-- 重置 -->
				<view class="reset">
					<scroll-view scroll-x='true' class="scroll ">
						<view class="reset-history flex flex-ai-c">
							<view class="reset-name flex flex-jc-c" v-show="history.brand">
								<view>{{history.brand}}</view>
								<view @click="delBrand">
									<i-icon icon="iconguanbi" size="26rpx"></i-icon>
								</view>
							</view>
							<view class="reset-name flex flex-jc-c" v-show="history.payment">
								<view>{{history.payment}}</view>
								<view @click="delPayment">
									<i-icon icon="iconguanbi" size="26rpx"></i-icon>
								</view>
							</view>
							<view class="reset-name flex flex-jc-c" v-show="history.mounthly">
								<view>{{history.mounthly}}</view>
								<view @click="delMounthly">
									<i-icon icon="iconguanbi" size="26rpx"></i-icon>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="reset-right flex flex-ai-c" @click="reset">
						<view style="margin-right: 10rpx;">
							<i-icon icon="iconzhongzhi" size="27rpx"></i-icon>
						</view>
						<view>重置</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<page-loading :show='pageLoading'>
			<view class="content">
				<carList :carlist='carlist'></carList>
				<view class="defaultMap" v-show="carlist.length===0">
					<image src="https://files.yzsheng.com/bussiness/imgs/tu@2x.png"></image>
					<view class="texna">
						暂无更多信息，看看其他的吧
					</view>
				</view>
				<u-loadmore :status="loadStatus" v-show="carlist.length" @loadmore="clickLoadMore" margin-top="50"/>
			</view>
		</page-loading>
	</view>
</template>

<script src='./downPayment.js'>

</script>

<style lang="scss" scoped>
	@import './downPayment.scss';

	//默认图
	.defaultMap {
		padding-top: 100rpx;
		width: 100%;
		position: fixed;
		text-align: center;

		image {
			width: 263rpx;
			height: 277rpx;
		}

		.texna {
			font-size: 28rpx;
			color: #999999;
		}
	}
</style>
